<template>
  <section class="container">
    <div class="body">
      <div class="flex flex-js-c title">
        {{newsDetails.newsContent.title}}
      </div>

      <div v-html="newsDetails.newsContent.content"></div>
      <div class="flex flex-js-c">
        <div class="btn">
          返回时尚资讯
        </div>
      </div>
    </div>


<!--    <div class="d">的撒</div>-->
<!--    {{ $t('header.home') }}-->
<!--    <div-->
<!--        class="demo position-relative"-->
<!--        style="height: 500px; width: 500px; background-color: red;font-size: 30px;"-->
<!--        v-permissionCover:X="['1','2', '3', '2']"-->
<!--    >-->
<!--      PC端-->
<!--    </div>-->
<!--    <button @click="handle">提示信息</button>-->
<!--    <svg-icon name="pass"/>-->
<!--    <button @click="C">切换语言</button>-->
  </section>
</template>

<script lang="ts">
import {defineComponent, ref, watch, reactive} from 'vue';
import { getApp } from '@/common/hooks';
import { Messages } from '@/components/Warm/Popup';

export default defineComponent({
  name: "home",
  components: {

  },
  data() {
    return {

    }
  },
  mounted() {

  },
  setup() {
    const { Route,} = getApp(['Route']);

    (() => {
      getApp().System.News?.getDetailsNews(Route?.query.newsId).then((res) => {
        newsDetails.newsContent = res;
      });
    })();

    /*新闻详情模块*/
    const newsDetails = reactive({
      /*新闻数据*/
      newsContent: {
        title: "资深时尚导师一对一招生会",
        content: "<p>作为一所国际时装、艺术与设计院校，<strong>马兰戈尼学院（Istituto Marangoni）</strong>将举办一场前所未有的虚拟数字活动——<strong>“I AM AI”</strong>，旨在重新定义时尚的版图。这场活动将突破传统时装展示的局限性，引领观众超越物理的地理限制，踏入元宇宙的虚拟世界。</p>\n" +
            "\n" +
            "<p>通过创新的技术手段，观众将能够身临其境地感受时尚的魅力，无论身处何地，都能沉浸在设计师所创造的数字时尚世界中。 <strong>“I AM AI”</strong> 汇聚了来之世界各地的马兰戈尼学院的杰出人才，彰显了马兰戈尼在时尚行业寻求变革的雄心壮志。</p>\n" +
            "\n" +
            "<p>此次数字活动庆祝创新与科技的碰撞，展示了来自米兰、佛罗伦萨、巴黎、伦敦、孟买、上海和深圳等校区的学生的独特审美。在<strong>“I AM AI”</strong> 的系列产品中，每个学生通过展示3套标志性的设计，无缝衔接虚拟空间，表现他们对虚拟世界的创造力和适应力，凸显技术与美学的和谐共生。</p>\n" +
            "\n" +
            "<p>此次活动携手创意机构<strong>Monogrid</strong>，将虚拟体验真实再现。观众有机会在精心构建的虚拟空间中探索，通过<strong>CLO3D</strong>深入体验每个数字创作服装背后的复杂过程，借助人工智能工具在研究和灵感阶段一探究竟。沉浸式体验还融入了游戏化元素，用户可选择某款学生设计并将其置于人工智能创建的背景中。</p>\n",
        imageUrl: "@assets/images/fashionInformationItem01.png.svg",
      },
    })


    return {
      newsDetails,
    }
  }
});
</script>

<style lang="scss" scoped>
.body {
  margin: 150Px 220Px 50Px 220Px;
  .title {
    margin-bottom: 50Px;
    color: $color-main;
    font-family: "PingFang SC";
    font-size: 26Px;
    font-style: normal;
    font-weight: 400;
    line-height: 24Px; /* 92.308% */
  }
  .btn{
    margin-top: 50Px;
    width: 168Px;
    height: 49Px;
    text-align: center;
    background-color: $color-main;
    color: #FFF;
    font-family: "PingFang SC";
    font-size: 18Px;
    font-style: normal;
    font-weight: 400;
    line-height: 49Px; /* 133.333% */
  }
}

</style>
